<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            // 获得游记id
            var id = getParams().id;
            var travelCommentId;
            var travelGoodId;
            var collectId;
            var author;

            // 进入游记
            if (id) {
                // 发送ajax请求
                $.get("/travels/" + id, function (data) {
                    console.log(data);
                    travelCommentId = data.commentId;
                    travelGoodId = data.goodId;
                    collectId = data.collectId;
                    author = data.author;

                    // 检查用户是否点赞
                    checkAddGood(user, travelGoodId);

                    // 渲染点赞数量
                    getCount(travelGoodId);

                    // 检查用户是否收藏
                    checkAddCollect(user, collectId);

                    // 渲染收藏数量
                    getCollectCount(collectId);

                    if (user) {
                        if (author.id == user.id) {
                            $("#letterBtn").attr("style", "display:none");
                            $("#followBtn").attr("style", "display:none");
                        }
                        $.get("/users/" + user.id + "/follow/" + author.id, function (data) {
                            if (data.success) {
                                $(".fBtn").html("已关注");
                            } else {
                                $(".fBtn").html("关注");
                            }
                        });
                    }


                    $("#followBtn").click(function () {

                        if (user) {

                            // 查询是否已经关注, 从而进行判断进行关注或者取消关注操作
                            $.get("/users/" + user.id + "/follow/" + author.id, function (data) {
                                /*if (data.success) {
                                 $(".fBtn").html("已关注");
                                 } else {
                                 $(".fBtn").html("关注");
                                 }*/
                                //$("#followBtn").click(function () {
                                var user = JSON.parse(sessionStorage.getItem("user"));
                                if (data.success) {
                                    // 点击取消关注
                                    $.ajax({
                                        url: "/users/" + user.id + "/follow/" + author.id,
                                        type: "DELETE",
                                        success: function (data) {
                                            // 1.更新本地缓存
                                            $(document).dialog({
                                                type: "confirm",
                                                style: "IOS",
                                                titleShow: false,
                                                content: "你已取消对TA的关注",
                                                buttons: [{
                                                    name: "确定",
                                                    callback: function () {
                                                        // 2.回到个人信息界面
                                                        location.href = "/travelContent.html?id=" + id;
                                                    }
                                                }]
                                            });
                                        }
                                    });
                                } else {
                                    // 点击关注
                                    $.ajax({
                                        url: "/users/" + user.id + "/follow/" + author.id,
                                        type: "PUT",
                                        success: function (data) {
                                            // 1.更新本地缓存
                                            $(document).dialog({
                                                type: "confirm",
                                                style: "IOS",
                                                titleShow: false,
                                                content: "关注成功!",
                                                buttons: [{
                                                    name: "确定",
                                                    callback: function () {
                                                        // 2.回到个人信息界面
                                                        location.href = "/travelContent.html?id=" + id;
                                                    }
                                                }]
                                            });
                                        }
                                    });
                                }
                                //});
                            });
                        } else {
                            $.ajax({
                                success: function () {
                                    // 1.更新本地缓存
                                    $(document).dialog({
                                        type: "confirm",
                                        style: "IOS",
                                        titleShow: false,
                                        content: "阁下还未登录!",
                                        buttons: [{
                                            name: "确定",
                                            callback: function () {
                                                // 2.回到个人信息界面
                                                location.href = "/login.html";
                                            }
                                        }]
                                    });
                                }
                            });
                        }
                    });

                    // 回显游记信息
                    renderViews(data);
                    $("#authot_id").prop("href", "/userProfiles.html?id=" + author.id);

                    $.get("/users/" + author.id + "/fansOrFollow", function (data) {
                        $("#fans").html(data.personalInterface.fans);
                    });

                    // 根据用户 id 查询TA的游记总数量
                    $.get("/users/" + author.id + "/travelCount", function (count) {
                        $("#travelsCount").html(count);
                    });
                });
                //发送get请求查询当前游记是否存在访问信息中
                $.get("/travels/" + id + "/travelVisit", function (sum) {
                    if (sum == null || sum == "") {
                        $.post("/travelVisits/" + id, {id: id, num: 1});
                        $(".read").renderValues(data.data);
                    } else {
                        $.ajax({
                            url: "/travelVisits/" + id,
                            data: {"id": id, "num": sum.num + 1},
                            type: "PUT",
                            success: function (data) {
                                $(".read").renderValues(data.data);
                            }

                        })
                    }
                });
            }

            $("#likeBtn").click(function () {
                if (user) {
                    // 检查用户是否可以点赞
                    $.get("/users/" + user.id + "/addGoods/" + travelGoodId, function (data) {
                        if (data.success) {
                            $.post("/addGoods/" + travelGoodId, function (data) {
                                if (data.success) {
                                    $("#likeState").html("已点赞");
                                    // 渲染点赞数量
                                    getCount(travelGoodId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addGoods/" + travelGoodId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#likeState").html("点赞");
                                    // 渲染点赞数量
                                    getCount(travelGoodId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        closeBtnShow: true,
                        content: "登录后才可以进行点赞",
                        buttons: [
                            {
                                name: "跳转到登陆界面",
                                callback: function () {
                                    location.href = "/login.html";
                                }
                            },
                            {
                                name: "取消",
                                callback: function () {
                                }
                            }
                        ]
                    });
                }
            });

            $("#collectBtn").click(function () {
                if (user) {
                    // 检查用户是否可以收藏
                    $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                        if (data.success) {
                            $.post("/addCollects/" + collectId, function (data) {
                                if (data.success) {
                                    $("#collectState").html("已收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addCollects/" + collectId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#collectState").html("收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        closeBtnShow: true,
                        content: "登录后才可以进行收藏",
                        buttons: [
                            {
                                name: "跳转到登陆界面",
                                callback: function () {
                                    location.href = "/login.html";
                                }
                            },
                            {
                                name: "取消",
                                callback: function () {
                                }
                            }
                        ]
                    });
                }
            });

            // 点击看评论按钮跳转到评论页面
            $("#commentBtn").click(function () {
                location.href = "/comment.html?id=" + travelCommentId;
            });
        });


        // 检查用户是否点赞
        function checkAddGood(user, travelGoodId) {
            // 点赞: 判断当前用户是否登录, 登录可点赞, 没登录不可以
            if (user) {
                // 检查用户是否已经点赞
                $.get("/users/" + user.id + "/addGoods/" + travelGoodId, function (data) {
                    if (data.success) {
                        $("#likeState").html("点赞");
                    } else {
                        $("#likeState").html("已点赞");
                    }
                });
            }
        }

        // 获取当前内容点赞数量
        function getCount(goodId) {
            $.get("/addGoods/" + goodId + "/counts", function (data) {
                // 显示点赞数量
                $("#likeCount").html(data);
            });
        }

        // 检查用户是否收藏
        function checkAddCollect(user, collectId) {
            // 点赞: 判断当前用户是否登录, 登录可收藏, 没登录不可以
            if (user) {
                // 检查用户是否已经收藏
                $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                    if (data.success) {
                        $("#collectState").html("收藏");
                    } else {
                        $("#collectState").html("已收藏");
                    }
                });
            }
        }

        // 获取当前内容收藏数量
        function getCollectCount(collectId) {
            $.get("/addCollects/" + collectId + "/counts", function (data) {
                // 显示收藏数量
                $("#collectCount").html(data);
            });
        }

        function renderViews(data) {
            $(".travels").renderValues(data);
        };
    </script>
    <style>
        .onComment {
            width: 100%;
            display: inline-table;
            /*position: fixed;*/
            bottom: 30px;
            max-width: 500px;
            z-index: 9;
        }
    </style>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">

        </div>
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-home fa-fw fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>
<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            <div class="read">
                浏览 <span render-html="num"></span>
            </div>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a id="authot_id">
                    <img class="rounded-circle" render-src="author.headImgUrl" id="head">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn fBtn" id="followBtn">关注</button>
                    <br>
                    <span id="travelsCount"></span>篇游记
                    <span id="fans"></span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>
        <!--游记的内容-->
        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>
    <div class="container d-flex" >
        <div class="p-2  flex-fill" id="commentBtn"><i class="fa  fa-commenting-o"  > </i>
            看评论
        </div>
        <div class="p-2  flex-fill" id="likeBtn">
            <i class="fa fa-thumbs-o-up"   disabled="true"> </i>
            <span id="likeState">点赞
            </span>
            (<span id="likeCount"></span>)
        </div>
        <div class="p-2  flex-fill" id="collectBtn"><i class="fa fa-star-o" > </i>
            <span id="collectState">
            收藏
            </span>
            (<span id="collectCount"></span>)
        </div>
    </div>

</div>


</body>
</html>